<template>
<div class="goodsDetail">
  <JdNavbar title="详情页" />

  <!-- 详情页主体 start -->
  <div class="goodsList">
    <div class="imgbox">
      <img v-if="list.img" :src="$img.imgServe + (list.img || '')" alt="" />
    </div>
    <div class="price">
      <span class="pricetag">￥</span>
      <span class="pricev" v-text="list.price"></span>
      <van-tag round type="warning" size="large">优惠券</van-tag>
    </div>
    <div class="desc">
      <span v-text="list.desc"></span>
    </div>
  </div>
  <!-- 详情页主体 end -->

  <van-goods-action>
    <van-goods-action-icon icon="chat-o" text="客服" dot />
    <van-goods-action-icon icon="cart-o" text="购物车" badge="1" />
    <van-goods-action-icon icon="shop-o" text="店铺" badge="1" />
    <van-goods-action-button type="warning" text="加入购物车" @click='addCart' />
    <van-goods-action-button type="danger" text="立即购买" />
  </van-goods-action>
</div>
</template>

<script>
import {JdNavbar} from '@/components'

export default {
  name: '',
  data() {
    return {
      list: {}
    }
  },

  components: {
    JdNavbar
  },

  methods: {
    addCart () {
      // 验证token是否有值，验证用户是否登录
      if (this.$verify.verifyToken()) {
        const data = {
          num: 1,
          id: this.list._id,
        }
        // 用户将商品加入到购物车
        this.$api.addCart(data).then(res => {
          if (res) {
            this.$dialog.success({
              title: 'success',
              message: '加入购物车成功',
              theme: 'round-button'
            }).then(() => {
              this.$router.push('/cart')
            })
          }
        })
      } else {
        this.$dialog.alert({
          title: '温馨提示',
          message: '请您先登录后再购买',
        }).then(() => {
          this.$router.push('/login')
        })
      }
    }
  },

  mounted () {
    // 在挂载阶段获取url中的id，根据传递的id提交接口数据，渲染页面
    const params = {
      id: this.$route.params.id 
    }
    this.$api.getGoodDetail(params).then(res => {
      this.list = res
    })
  }
}
</script>

<style lang="scss" scoped>
  .goodsDetail {
    width: 100%;
    height: 100%;
  }

  .goodsList {
    width: 100%;
    height: 100%;
    padding-bottom: 1.6rem;
    .imgbox {
      img {
        width: 10rem;
        height: 9.866667rem;
        display: block;
      }
    }
    .price {
      padding-left: .266667rem;
      box-sizing: border-box;
      width: 10rem;
      height: 1.6rem;
      background-color: #fff;
      .pricetag {
        font-size: .5rem;
        color: red;
      }
      .pricev {
        font-weight: bold;
        font-size: .553333rem;
        color: red;
        margin-right: .133333rem;
      }
    }
    .desc {
      width: 10rem;
      height: 2.133333rem;
      background-color: #fff;
      font-size: .426667rem;
      color: #333;
      text-indent: 2em;
    }
  }
</style>